<!--
 * @Author: 陈心怡
 * @Date: 2024-09-20 17:46:53
 * @LastEditors: 陈心怡
 * @LastEditTime: 2024-09-20 19:16:40
 * @FilePath: \vue3-web-study\src\views\apply\index.vue
 * @Description: 
-->
<template>
  <div class="apply-container">
    <!-- 头图 -->
    <TopTheme
      height="380px"
      bg="toppic01.jpg"
      title="供应商合作"
      des1="橙券诚邀您的加入，更高效的合作方式，更尖端的技术接入"
      des2="我们期待与您携手前行共创未来"
    />
    <!-- 入驻流程 -->
    <div class="entry-process">
      <h3 class="text-center">入驻流程</h3>
      <ul class="flex flex-center">
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow1.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>填写信息</h4>
          </div>
        </li>
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow2.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>商务联系</h4>
          </div>
        </li>
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow3.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>洽谈资源</h4>
          </div>
        </li>
        <li>
          <div class="process-item">
            <div class="process-icon">
              <img :src="$utils.getImg(`flow4.png`)" width="130" height="130" alt="flow1" />
            </div>
            <h4>签约合作</h4>
          </div>
        </li>
      </ul>
    </div>
    <!-- 申请表单 -->
    <apply-form />
  </div>
</template>

<script setup>
import ApplyForm from './components/apply-form.vue'
defineOptions({ name: 'ApplyPage' })
</script>

<style lang="scss" scoped>
.entry-process {
  padding: 70px 0 100px;
  h3 {
    font-size: 30px;
    line-height: 60px;
  }
  ul.flex {
    li:not(:last-child) {
      display: flex;
      &::after {
        display: block;
        height: 130px;
        width: 52px;
        margin: 0 40px;
        content: '';
        background: url('@/assets/img/flow-r.png') no-repeat center/52px 24px;
      }
    }
  }
  .process-item {
    text-align: center;
    h4 {
      margin-top: 30px;
      font-size: 20px;
    }
  }
}
</style>
